<template>
    <view class="createCustomer">
        <uni-nav-bar fixed left-icon="left" :title="title" @clickLeft="backHandle" class="unibarS">
            <!-- <block slot="right">
                <text class="sub-btn" @click="submit">保存</text>
            </block> -->
        </uni-nav-bar>
        <view v-if="step == 1" class="content_box">
			<!-- 主要内容 -->
			<view class="customer-content">
				<u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
					<u-form-item class="item-box" label="客户名称" required @click="SelectCus()" borderBottom ref="item1">
						<view class="item-temp-box">
							<view :class="!params.customerId ? 'item-temp-text-empty' : ''">
								{{ params.customerName || '点击选择' }}
							</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="订单来源" required @click="showSelect('orderSource')"
						borderBottom ref="item1">
						<view class="item-temp-box">
							<view :class="!params.orderSource ? 'item-temp-text-empty' : ''">
								{{ bus_source_status[params.orderSource] || '点击选择' }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="业务经理" @click="selectHandle()"
						borderBottom ref="item1">
						<view class="item-temp-box">
							<view v-if="params.businessManagerId" class="avatar-box">
								<u-avatar class="avatar" size="25" :src="params.avatar"></u-avatar>
								<text>{{ params.businessManager }}</text>
							</view>
							<view v-else class="item-temp-text-empty">点击选择</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="付款类型" required @click="showSelect('paymentType')"
						borderBottom ref="item1">
						<view class="item-temp-box">
							<view :class="!params.paymentType ? 'item-temp-text-empty' : ''">
								{{ bus_pay_type_list[params.paymentType] || '点击选择' }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="付款方式" required @click="showSelect('paymentMethod')"
						borderBottom ref="item1">
						<view class="item-temp-box">
							<view :class="!params.paymentMethod ? 'item-temp-text-empty' : ''">
								{{ bus_pay_status[params.paymentMethod] || '点击选择' }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="付款备注" labelPosition="top" ref="item1">
						<u--textarea v-model="params.remark" border="false" placeholder="请输入备注信息" count
							style="margin-top: 20rpx; background: #CCCCCC19;"></u--textarea>
					</u-form-item>
					<u-form-item class="item-box" label="付款截图" labelPosition="top" ref="item1">
						<view class="img_list">
							<view @click="showPhoto" class="upload_box">
								<u-icon name="camera" color="#677585" size="26"></u-icon>
								<view>上传图片</view>
							</view>
							<view class="img_box" v-for="(item, index) in params.paymentUrl" :key="index">
								<img @click="previewImg(index)" style="width: 164rpx; height: 164rpx;" :src="item" alt="">
                                <u-icon @click="delImg(index)" class="del_icon" name="close-circle" color="#677585" size="24"></u-icon>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<!--  -->
			<view class="footer-box">
				<view @click="nextHandle(1)" class="footer-sub-btn">下一步（添加商品）</view>
			</view>
		</view>
        <view v-if="step == 2" class="content_box" style="background-color: #ffffff;">
			<!-- 主要内容 -->
			<view class="customer-content flex_content" style="padding: 0 20rpx;">
                <view class="add_title_box">
                    <view class="left_box">
                        <view></view>
                        <view>关联商品</view>
                    </view>
                    <view @click="addGoods()" class="add_btn">添加商品</view>
                </view>
                <view class="goods_box">
                    <template v-if="goodsList.length">
                        <view v-for="(item, index) in goodsList" :key="index" class="goods_item">
                            <!-- 商品名称 -->
                            <view class="goods_name">
                                <view class="goods_name_text">{{ item.commodityName }}</view>
                                <u-icon @click="deleteHandle(index, 'goodsList')" name="trash" color="#FF011D" size="20"></u-icon>
                            </view>
                            <!-- 商品编码 -->
                            <view class="goods_row">
                                <view class="goods_label">商品编码：</view>
                                <view class="goods_value">{{ item.commodityNumber }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">商品规格：</view>
                                <view class="goods_value">{{ item.minUnit }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">库存单价：</view>
                                <view @click="upPrice(index, item.priceType)" class="goods_input">
                                    <view class="price_value">
                                        <view>{{ item.factoryPriceName }}</view>
                                        <u-icon name="arrow-right" color="#677585" size="16"></u-icon>
                                    </view>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">销售单价(元)：</view>
                                <view class="goods_input">
                                    <view class="price_value">
                                        <input type="number" @blur="setSubtotal(index)" v-model="item.unitPrice">
                                    </view>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">数量：</view>
                                <view class="circle_value">
                                    <u-icon @click="minus(index, 'goodsList')" name="minus-circle" size="16"></u-icon>
									<view class="price_value" style="width: 100rpx; margin: 0 20rpx;">
										<input type="number" @blur="blurQuantity(index, 'goodsList')" v-model="item.quantity">
									</view>
                                    <!-- <text style="display: inline-block; margin: 0 20rpx;">{{ item.quantity }}</text> -->
                                    <u-icon @click="add(index, 'goodsList')" name="plus-circle" size="16"></u-icon>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">箱数量：</view>
                                <view class="circle_value">
                                    <u-icon @click="minusBox(index, 'goodsList')" name="minus-circle" size="16"></u-icon>
									<view class="price_value" style="width: 100rpx; margin: 0 20rpx;">
										<input type="number" @blur="blurNosb(index, 'goodsList')" v-model="item.numberOfShippingBoxes">
									</view>
                                    <!-- <text style="display: inline-block; margin: 0 20rpx;">{{ item.numberOfShippingBoxes }}</text> -->
                                    <u-icon @click="addBox(index, 'goodsList')" name="plus-circle" size="16"></u-icon>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">总价：</view>
                                <view class="goods_value">{{ item.subtotal }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">提成比率：</view>
								<view class="price_value" style="width: 100rpx; margin: 0 20rpx;">
								<input type="number" v-model="item.commissionRatio">
								</view>
                                <!-- <view class="goods_value">{{ item.commissionRatio }}</view> -->
                            </view>
                        </view>
                        <view class="income_box">
                            <view>溢价金额：<text style="color: #FF001C;">{{ premium }}</text></view>
                            <view>合计(元)：<text style="color: #FF001C;">¥{{ realTotal }}</text></view>
                            <view @click="too()">查看预估收益</view>
                        </view>
                        <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
                            <u-form-item class="item-box" label="订单金额" required borderBottom ref="item1">
                                <u--input v-model="params.orderTotalAmount" border="none" placeholder="根据添加商品自动计算支持修改"></u--input>
                            </u-form-item>
                            <u-form-item class="item-box" label="付款金额" required borderBottom ref="item1">
                                <u--input v-model="params.depositAmount" :disabled="params.paymentType == '1002'" border="none" placeholder="与订单金额同步"></u--input>
                            </u-form-item>
                            <u-form-item class="item-box" label="订单差值" required borderBottom ref="item1">
                                <u--input v-model="params.differenceAmount" disabled border="none" placeholder="自动计算，实际订单金额与手动修改金额差值"></u--input>
                            </u-form-item>
                        </u--form>
                    </template>
                    <view v-else class="no_goods_box"><text>暂无商品</text></view>
                </view>
			</view>
			<view class="footer-box">
				<view class="footer-back-btn" @click="prevHandle()">上一步</view>
				<view class="footer-sub-btn" @click="nextHandle(2)" style="margin-left: 30rpx;">下一步 (添加赠品)</view>
			</view>
		</view>
        <view v-if="step == 3" class="content_box" style="background-color: #ffffff;">
			<!-- 主要内容 -->
			<view class="customer-content flex_content" style="padding: 0 20rpx;">
                <view class="add_title_box">
                    <view class="left_box">
                        <view></view>
                        <view>赠品管理</view>
                    </view>
                    <view @click="addGift()" class="add_btn">添加赠品</view>
                </view>
                <view class="goods_box">
                    <template v-if="giftList.length">
                        <view v-for="(item, index) in giftList" :key="index" class="goods_item">
                            <!-- 商品名称 -->
                            <view class="goods_name">
                                <view class="goods_name_text">{{ item.commodityName }}</view>
                                <u-icon @click="deleteHandle(index, 'giftList')" name="trash" color="#FF011D" size="20"></u-icon>
                            </view>
                            <!-- 商品编码 -->
                            <view class="goods_row">
                                <view class="goods_label">商品编码：</view>
                                <view class="goods_value">{{ item.commodityNumber }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">商品规格：</view>
                                <view class="goods_value">{{ item.minUnit }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">库存单价：</view>
                                <view class="goods_value">{{ item.factoryPriceName }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">销售单价(元)：</view>
                                <view class="goods_value">{{ item.unitPrice }}</view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">数量：</view>
                                <view class="circle_value">
                                    <u-icon @click="minus(index, 'giftList')" name="minus-circle" size="16"></u-icon>
                                    <view class="price_value" style="width: 100rpx; margin: 0 20rpx;">
                                    	<input type="number" @blur="blurQuantity(index, 'giftList')" v-model="item.quantity">
                                    </view>
									<!-- <text style="display: inline-block; margin: 0 20rpx;">{{ item.quantity }}</text> -->
                                    <u-icon @click="add(index, 'giftList')" name="plus-circle" size="16"></u-icon>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">箱数量：</view>
                                <view class="circle_value">
                                    <u-icon @click="minusBox(index, 'giftList')" name="minus-circle" size="16"></u-icon>
									<view class="price_value" style="width: 100rpx; margin: 0 20rpx;">
										<input type="number" @blur="blurNosb(index, 'giftList')" v-model="item.numberOfShippingBoxes">
									</view>
                                    <!-- <text style="display: inline-block; margin: 0 20rpx;">{{ item.numberOfShippingBoxes }}</text> -->
                                    <u-icon @click="addBox(index, 'giftList')" name="plus-circle" size="16"></u-icon>
                                </view>
                            </view>
                            <view class="goods_row">
                                <view class="goods_label">总价：</view>
                                <view class="goods_value">{{ item.subtotal }}</view>
                            </view>
                        </view>
                    </template>
                    <view v-else class="no_goods_box"><text>暂无赠品</text></view>
                </view>
			</view>
			<view class="footer-box">
				<view class="footer-back-btn" @click="prevHandle()">上一步</view>
				<view class="footer-sub-btn" @click="nextHandle(3)" style="margin-left: 30rpx;">下一步</view>
			</view>
		</view>
        <view v-if="step == 4" class="content_box">
			<!-- 主要内容 -->
			<view class="customer-content">
				<u--form labelPosition="left" :model="params" ref="uForm" labelWidth="100">
					<u-form-item class="item-box" label="收件人姓名" required borderBottom ref="item1">
                        <u--input v-model="params.recipient" border="none" placeholder="根据客户信息自动带出支持修改"></u--input>
                    </u-form-item>
					<u-form-item class="item-box" label="收件人手机号" required borderBottom ref="item1">
                        <u--input v-model="params.recipientPhone" border="none" placeholder="根据客户信息自动带出支持修改"></u--input>
                    </u-form-item>
					<u-form-item class="item-box" label="所在地区" required @click="selectCityHandle()" borderBottom ref="item1">
                        <view class="item-temp-box">
                            <view :class="!params.localProvinceName ? 'item-temp-text-empty' : ''">
                                {{ params.shippingAddress||
                                '根据客户信息自动带出支持修改' }}</view>
                        </view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
					<u-form-item class="item-box" label="物流" required borderBottom ref="item1">
						<view class="item-temp-box">
							<picker @change="bindPickerlogisticsChange" range-key="logisticsCompany" :range="logisticsList">
                                <view :class="!params.logistics ? 'item-temp-text-empty' : ''">{{ params.logistics || '请选择物流' }}</view>
                            </picker>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="item-box" label="" borderBottom ref="item1">
						<u--input v-model="params.shippingAddressShort" border="none" placeholder="请输入详细地址如门牌号等"></u--input>
					</u-form-item>
				</u--form>
				<u--form labelPosition="left" ref="uForm" labelWidth="100">
					<u-form-item class="item-box" label="领导审批" required borderBottom ref="item1">
                        <view class="item-temp-box">
                            <radio-group @change="changeRadio" class="radio-group-box">
                                <label v-for="item in bus_document_type" :key="item.dictValue" style="margin-right: 20rpx;">
                                    <radio :value="item.dictValue" :checked="params.documentType == item.dictValue" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" style="transform:scale(0.7)" />
                                    <text>{{ item.dictLabel }}</text>
                                </label>
                            </radio-group>
                        </view>
                    </u-form-item>
					<u-form-item class="item-box" label="发货备注" labelPosition="top" ref="item1">
						<u--textarea v-model="params.deliverGoodsRemark" border="false" placeholder="请输入备注信息" count
							style="margin-top: 20rpx; background: #CCCCCC19;"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
			<!--  -->
			<view class="footer-box">
                <view class="footer-back-btn" @click="prevHandle()">上一步</view>
                <template v-if="!editType">
                    <view class="footer-back-btn" @click="draftHandle()" style="margin-left: 30rpx;">保存草稿</view>
                    <view class="footer-sub-btn" @click="submitHandle()" style="margin-left: 30rpx;">提交审批</view>
                </template>
                <template v-else>
                    <view class="footer-back-btn" @click="submitHandle()" style="margin-left: 30rpx;">编辑订单</view>
                </template>
			</view>
		</view>
        <!-- 弹出选择菜单 -->
        <u-action-sheet :show="showActionSheet" :actions="actions" title="请选择" @close="showActionSheet = false"
            @select="sexSelect">
        </u-action-sheet>
        <!-- 库存单价 -->
        <u-action-sheet :show="showActionPrice" :actions="selectPrice" title="请选择" @close="showActionPrice = false"
            @select="submitPrice">
        </u-action-sheet>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
import { upImage } from '@/common/utils'
export default {
    data() {
        return {
            title: '新建订单',
            step: 1, // 步骤
            showActionSheet: false,
            // 选择地区
            showPicker: false,
            totalPrice: 0,
            params: {
                customerId: null,
                customerName: null,
                orderSource: null, // 订单来源
                businessManager: null, // 业务经理
                businessManagerId: null, // 业务经理id
                commodityList: [], // 商品集合
                orderTotalAmount: 0, // 订单金额
                differenceAmount: 0, // 订单差额
                depositAmount: 0, // 定金
                paymentMethod: null,
                avatar: null,
                remark: '',
                deliverGoodsRemark: '',
                paymentUrl: [],
                recipient: '', // 收货人
                recipientPhone: '', // 收货人手机号
                documentType: '1001', //文档单据类型
                shippingAddressShort: '', // 详细收货地址

                localProvinceName: '',
                localCityName: '',
                localCountyName: '',
                areaCode: '', // 省编码
                shippingAddress: '',
                areaCodeAll: '',
                logisticsId: '',
                logistics: ''
            },
            goodsList: [], // 选择的商品集合
            giftList: [], // 选择的赠品集合
            bus_document_type: [],
            // 弹出底部弹出菜单，展示的集合
            actions: [],
            radio: '',
            switchVal: false,
            count: 4,
            value: 2,
            // 存储属性，用于保存当前正在编辑的表单项
            tempPropName: null,
            showCalendar: false,
            editID: null,
            editType: null,
			codeImgSrc: [
				'https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641',
				'https://inews.gtimg.com/om_bt/OkEPpEM1AZfKFIi1Xq5YapKDWpVWWex8WQ-HJ-QG3VPO0AA/641'
			],
			showActionPrice: false, // 显示隐藏价格选择
			selectPrice: [], // 选择价格
			setPriceIndex: null, // 选择商品的下标
            realTotal: 0, // 订单的真实总金额
            premium: 0, // 溢价金额
            provincesList: [], // 省数据列表
            provincesIndex: null, // 省数据下标
            provincesName: null, // 省数据下标
            logisticsList: [] // 物流集合
        }
    },
    watch: {
        'params.orderTotalAmount': function (newVal, oldVal) {
            console.log(newVal)
            let num = Math.abs(Number(newVal - this.realTotal)).toFixed(2);
            this.params.differenceAmount = num
            this.params.depositAmount = newVal
        }
    },
    onLoad(options) {
        // 物流
        this.getLogistics()

        this.bus_pay = JSON.parse(uni.getStorageSync('bus_pay_status'))
        this.bus_pay_status = convertToDict(this.bus_pay)

        this.bus_source = JSON.parse(uni.getStorageSync('bus_source'))
        this.bus_source_status = convertToDict(this.bus_source)

        // 付款类型
        this.bus_pay_type = JSON.parse(uni.getStorageSync('bus_pay_type'))
        this.bus_pay_type_list = convertToDict(this.bus_pay_type)

        // 付款类型  默认全款 第一个
        this.params.paymentType = this.bus_pay_type[0].dictValue

        this.get_bus_document_type()
        if(options.id && options.type == 'edit') {
            this.title = '编辑订单'
            this.editID = options.id
            this.editType = true
            this.getDetails()
        }
        // 客户信息
        if(options.cId && options.cName) {
            this.params.customerId = options.cId
            this.params.customerName = options.cName
			this.getCustomerDetails(options.cId)
        }
    },
    methods: {
		// 获取客户信息
		getCustomerDetails(cId) {
			this.$http.get('/app/customer/detailedInforMtion/' + cId, {}).then(res => {
				console.log(res)
				if (res.code == 200) {
					this.params.orderSource = res.data.opportunitySource
					this.params.businessManager = res.data.businessManagerName
					this.params.businessManagerId = res.data.businessManagerId
					
					// 收货人姓名
					this.params.recipient = res.data.customerName
					this.params.recipientPhone = res.data.phoneNumber
					this.params.shippingAddressShort = res.data.detailedAddress
					
					this.params.localProvinceName = res.data.localProvinceName
					this.params.localCityName = res.data.localCityName
					this.params.localCountyName = res.data.localCountyName
					
					this.params.areaCodeAll = res.data.localProvince + ',' +  res.data.localCity + ',' +  res.data.localCounty
				}
			})
		},
        getDetails() {
			this.$http.get('/app/order/number/' + this.editID, {}).then(res => {
                console.log(res)
				if (res.code == 200) {
                    // res.data.commodityList.forEach((item, index) => {
                    //     item.id = item.commodityId
                    // });

                    let goodsList = res.data.commodityList.filter(item => {
                        return item.type == '0'
                    })
                    if(goodsList.length) {
                        let total = 0
                        goodsList.forEach(item => {
                            total += Number(item.subtotal)
                        })
                        this.realTotal = total.toFixed(2)

                        this.getGoodsGroupList(goodsList, 0)
                    }

                    let giftList = res.data.commodityList.filter(item => {
                        return item.type == '1'
                    })
                    if(giftList.length) {
                        this.getGoodsGroupList(giftList, 1)
                    }

                    this.params = res.data

                    this.params.paymentUrl = this.params.paymentUrl? this.params.paymentUrl.split(',') : []
                    
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},        // 显示选择器
        showSelect(propName) {
            // 客户类型
            if (propName == 'paymentMethod') {
                this.actions = this.bus_pay
            } else if (propName == 'orderSource') {
                this.actions = this.bus_source
            } else if (propName == 'paymentType') {
                this.actions = this.bus_pay_type
            }
            this.tempPropName = propName
            this.showActionSheet = true
        },
        sexSelect(e) {
            this.params[this.tempPropName] = e.dictValue
        },
        addGoods() {
            let that = this
            uni.navigateTo({
                url: '/pages/goods/selectGoods',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        console.log(data)
                        let list = JSON.parse(JSON.stringify(data.data))
                        // that.goodsList = list
                        that.getGoodsGroupList(list, 0)
                        that.$forceUpdate()
                    },
                },
                success: function (res) {
                    console.log('success:' + JSON.stringify(res))
                    let arr = JSON.parse(JSON.stringify(that.goodsList))
                    res.eventChannel.emit('emitDataHandle', { data: arr })
                }
            });
        },
        // 添加赠品
        addGift() {
            let that = this
            uni.navigateTo({
                url: '/pages/goods/selectGoods',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        console.log(data)
                        let list = JSON.parse(JSON.stringify(data.data))
                        // that.giftList = list
                        that.getGoodsGroupList(list, 1)
                        that.$forceUpdate()
                    },
                },
                success: function (res) {
                    console.log('success:' + JSON.stringify(res))
                    let arr = JSON.parse(JSON.stringify(that.giftList))
                    res.eventChannel.emit('emitDataHandle', { data: arr })
                }
            });
        },
        getGoodsGroupList(list, type) {
            let idstr = []
            if(this.editType) {
                // 编辑时
                idstr = list.map(item => {
                    return item.commodityId
                })
            } else {
                // 新增时
                idstr = list.map(item => {
                    return item.id
                })
            }

			this.$http.post('/app/neworder/my/conversion', { ids: idstr }).then(res => {
                console.log(res)
				if (res.data.code == 200) {
                    // console.log(res.data.data)
                    this.setGoodsList(list, res.data.data, type)
				} else {
					uni.$u.toast(res.msg)
				}
			})
        },
        // 设置商品列表数据
        setGoodsList(list, convertList, type) {
            let convertObj = this.convertDataToObject(convertList)
            console.log(convertObj)
            list.forEach(item => {
                item['type'] = type

                item['priceType'] = [
                    { name: '拆箱价: ' + convertObj[this.editType? item.commodityId : item.id].price.unitPrice, value: convertObj[this.editType? item.commodityId : item.id].price.unitPrice },
                    { name: '单价: ' + convertObj[this.editType? item.commodityId : item.id].price.boxConversionUnitPrice, value: convertObj[this.editType? item.commodityId : item.id].price.boxConversionUnitPrice },
                    { name: '顿单价: ' + convertObj[this.editType? item.commodityId : item.id].price.tonConversionUnitPrice, value: convertObj[this.editType? item.commodityId : item.id].price.tonConversionUnitPrice }
                ]

                // 处理库存单价 默认显示,  和每个商品 选择的价格类型
                if(!this.editType) {
                    item['factoryPrice'] = convertObj[this.editType? item.commodityId : item.id].price.unitPrice
                    item['factoryPriceName'] = '单价: ' + convertObj[this.editType? item.commodityId : item.id].price.unitPrice
                } else {
                    item['factoryPrice'] = item.factoryPrice
                    item.priceType.forEach(items => {
                        if(item.factoryPrice == items.value) {
                            item['factoryPriceName'] = items.name
                        }
                    })
                }

                // 默认销售单价
                // 0 商品  1赠品
                if(type == 0) {
                    if (!this.editType) {
                        item['commissionRatio'] = item.commission
                        item['unitPrice'] = convertObj[this.editType? item.commodityId : item.id].price.unitPrice
                    }
                    if (this.editType) {
                        item['unitPrice'] = item.unitPrice
                        item['commissionRatio'] = item.commissionRatio
                    }
                } else {
                    item['unitPrice'] = 0
                }

                // 数量默认1
                if(this.editType) {
                    item['quantity'] = item.quantity
                } else {
                    item['quantity'] = 1
                }
                // 转换比 绑定到 商品列表
                item['convertQuantity'] = convertObj[this.editType? item.commodityId : item.id].quantity
                // 箱数 
                item['numberOfShippingBoxes'] = Number(Number(item.quantity) / Number(convertObj[this.editType? item.commodityId : item.id].quantity.toBox)).toFixed(3)
                // 每行的 小记  总价

                // 0 商品  1赠品
                if(type == 0) {
                    item['subtotal'] = Number(Number(item.quantity) * Number(item.unitPrice)).toFixed(2)
                    this.goodsList = list
                    if(!this.editType) {
                        // 触发计算 订单金额
                        this.calculateTotal()
                    }
                } else {
                    item['subtotal'] = 0
                    this.giftList = list  
                }

                if(this.editType && type == 0) {
                    this.calculatePremium()
                }
            })
        },
        // 将数组转换为对象
        convertDataToObject(data) {
            const result = {};
            data.forEach(item => {
                const orderId = Object.keys(item)[0];
                result[orderId] = item[orderId];
            });
            return result;
        },

        // 减少商品数量
        minus(index, str) {
            if(str == 'giftList') {
                let num = Number(this.giftList[index].quantity)
                if(num > 1) {
                    num--
                    this.$set(this.giftList[index], 'quantity', num.toFixed(2))
                    // 设置箱数
                    this.setgiftListBox(index)
                } else {
                    num = 1
                    this.$set(this.giftList[index], 'quantity', num.toFixed(2))
                    // 设置箱数
                    this.setgiftListBox(index)
                }
            } else {
                let num = Number(this.goodsList[index].quantity)
                if(num > 1) {
                    num--
                    this.$set(this.goodsList[index], 'quantity', num.toFixed(2))
                    // 设置箱数
                    this.setBox(index)
                    // 每行总数
                    this.setSubtotal(index)
                } else {
                    num = 1
                    this.$set(this.goodsList[index], 'quantity', num.toFixed(2))
                    // 设置箱数
                    this.setBox(index)
                    // 每行总数
                    this.setSubtotal(index)
                }
            }
        },

        // 增加商品数量
        add(index, str) {
            if(str == 'giftList') {
                let num = Number(this.giftList[index].quantity)
                num++
                this.$set(this.giftList[index], 'quantity', num.toFixed(2))
                // 设置箱数
                this.setgiftListBox(index)
            } else {
                let num = Number(this.goodsList[index].quantity)
                num++
                this.$set(this.goodsList[index], 'quantity', num.toFixed(2))
                // 设置箱数
                this.setBox(index)
                // 每行总数
                this.setSubtotal(index)
            }
        },
		// 输入数量 后
		blurQuantity(index, str) {
			if(str == 'giftList') {
				let num = Number(this.giftList[index].quantity)
				if(num < 0) {
					num = 1
					this.$set(this.giftList[index], 'quantity', num.toFixed(2))		
				}
				this.setgiftListBox(index)
			} else {
				let num = Number(this.goodsList[index].quantity)
				if(num < 0) {
					num = 1
				    this.$set(this.goodsList[index], 'quantity', num.toFixed(2))
				}
				// 设置箱数
				this.setBox(index)
				// 每行总数
				this.setSubtotal(index)
			}
		},
        // 减少箱数量：
        minusBox(index, str) {
            if(str == 'goodsList') {
                let num = Number(this.goodsList[index].numberOfShippingBoxes)
                let toBox = Number(this.goodsList[index].convertQuantity.toBox)
                if(num > 1) {
              num = Number(num - 1).toFixed(3)
              this.$set(this.goodsList[index], 'numberOfShippingBoxes', num)

                    let p = Number(toBox) * num
                    this.$set(this.goodsList[index], 'quantity', p.toFixed(2))
                } else {
                    num = 1
                    this.$set(this.goodsList[index], 'numberOfShippingBoxes', num)

                    let p = Number(toBox) * num
                    this.$set(this.goodsList[index], 'quantity', p.toFixed(2))
                }
                this.setSubtotal(index)
            } else {
                let num = Number(this.giftList[index].numberOfShippingBoxes)
                let toBox = Number(this.giftList[index].convertQuantity.toBox)
                if(num > 1) {
                    num = Number(num - 1).toFixed(3)
                    this.$set(this.giftList[index], 'numberOfShippingBoxes', num)

                    let p = Number(toBox) * num
                    this.$set(this.giftList[index], 'quantity', p.toFixed(2))
                } else {
                    num = 1
                    this.$set(this.giftList[index], 'numberOfShippingBoxes', num)

                    let p = Number(toBox) * num
                    this.$set(this.giftList[index], 'quantity', p.toFixed(2))
                }
            }
        },
        // 增加箱数量
        addBox(index, str) {
            if(str == 'goodsList') {
                let num = Number(this.goodsList[index].numberOfShippingBoxes)
                num = num + 1
                this.$set(this.goodsList[index], 'numberOfShippingBoxes', num)

                let toBox = Number(this.goodsList[index].convertQuantity.toBox)
                let p = Number(toBox) * num
                this.$set(this.goodsList[index], 'quantity', p.toFixed(2))

                // 计算单行的总价
                this.setSubtotal(index)
            } else {
                let num = Number(this.giftList[index].numberOfShippingBoxes)
                num = num + 1
                this.$set(this.giftList[index], 'numberOfShippingBoxes', num)

                let toBox = Number(this.giftList[index].convertQuantity.toBox)
                let p = Number(toBox) * num
                this.$set(this.giftList[index], 'quantity', p.toFixed(2))
            }
        },
		
		// 输入箱数量
		blurNosb(index, str) {
			if(str == 'goodsList') {
				let num = Number(this.goodsList[index].numberOfShippingBoxes)
				if(num < 0) {
					num = 1
					this.$set(this.goodsList[index], 'numberOfShippingBoxes', num)
				}
				let toBox = Number(this.goodsList[index].convertQuantity.toBox)
				let p = Number(toBox) * num
				this.$set(this.goodsList[index], 'quantity', p.toFixed(2))
				// 计算单行的总价
				this.setSubtotal(index)
			} else {
				let num = Number(this.giftList[index].numberOfShippingBoxes)
				if(num < 0) {
					num = 1
					this.$set(this.giftList[index], 'numberOfShippingBoxes', num)
				}
				
				let toBox = Number(this.giftList[index].convertQuantity.toBox)
				let p = Number(toBox) * num
				this.$set(this.giftList[index], 'quantity', p.toFixed(2))
			}
		},

        // 设置箱数
        setBox(index) {
            let num = Number(this.goodsList[index].quantity)
            let toBox = Number(this.goodsList[index].convertQuantity.toBox)
            // 设置箱数
            let p =  Number(num / Number(toBox)).toFixed(3)
            this.$set(this.goodsList[index], 'numberOfShippingBoxes', p)
        },
        // 设置箱数
        setgiftListBox(index) {
            let num = Number(this.giftList[index].quantity)
            let toBox = Number(this.giftList[index].convertQuantity.toBox)
            // 设置箱数
            let p =  Number(num / Number(toBox)).toFixed(3)
            this.$set(this.giftList[index], 'numberOfShippingBoxes', p)
        },
        // 计算单行的总价
        setSubtotal(index) {
            let quantity = this.goodsList[index].quantity
            let unitPrice = this.goodsList[index].unitPrice
            let num = Number(Number(unitPrice) * Number(quantity)).toFixed(2)
            this.$set(this.goodsList[index], 'subtotal', num)
            // 触发计算 订单金额
            this.calculateTotal()
            // 出发计算 溢价金额
            this.calculatePremium()
        },
        calculateTotal() {
            let total = 0
            this.goodsList.forEach(item => {
                total += Number(item.subtotal)
            })
            this.realTotal = total.toFixed(2)
            this.params.orderTotalAmount = total.toFixed(2)
            this.params.depositAmount = total.toFixed(2)
        },
        calculatePremium() {
            let factoryPrice = 0
            let unitPrice = 0
			let total = 0
            this.goodsList.forEach(item => {
				let num = (Number(item.unitPrice) - Number(item.factoryPrice)) * Number(item.quantity)
				total += num
                // factoryPrice += Number(item.factoryPrice)
                // unitPrice += Number(item.unitPrice)
            })
			this.premium = total.toFixed(2)
            // this.premium = (factoryPrice - unitPrice).toFixed(2)
        },

        // 查看预估收益
        too() {
            let obj = JSON.parse(JSON.stringify(this.params))
            obj['list'] = this.goodsList
            this.$http.post('/app/neworder/my/fnRoyalties', obj).then(res => {
                console.log(res)
				if (res.data.code == 200) {
                    let data = res.data.data
                    let str = `预估收益：${ data.commissionAmount } (订单提成)+${data.premiumAmount}(溢价分成)`
                    uni.showToast({
                        title: str,
                        duration: 5000,
                        icon: 'none'
                    });
				} else {
					uni.$u.toast(res.msg)
				}
			})
        },
        // 关联商品
        selectGoods() {
            let that = this
            uni.navigateTo({
                url: '/pages/goods/relationGoods',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        let obj = JSON.parse(JSON.stringify(data.data))
                        that.params.commodityList = obj.list
                        that.params.orderTotalAmount = obj.totalPrice
                    },
                },
                success: function (res) {
					// let obj = {}
                    res.eventChannel.emit('emitDataHandle', { data: that.params.commodityList })
                }
            });
        },
        nextHandle(type) {
            if(type == 1) {
                if(!this.params.customerId) return uni.$u.toast('请选择客户')
                if(!this.params.orderSource) return uni.$u.toast('请选择订单来源')
                if(!this.params.businessManagerId) return uni.$u.toast('请选择业务经理')
                if(!this.params.paymentType) return uni.$u.toast('请选择付款类型')
                if(!this.params.paymentMethod) return uni.$u.toast('请选择付款方式')
            }
            if(type == 2 && !this.goodsList.length) return uni.$u.toast('请添加商品')
            if(type == 4) {
                if(!this.params.recipient) return uni.$u.toast('请输入收件人姓名')
                if(!this.params.recipientPhone) return uni.$u.toast('请输入收件人手机号')
                if(!this.params.localProvinceName) return uni.$u.toast('请选择所在地区')
                if(!this.params.logistics) return uni.$u.toast('请选择物流')
                if(!this.params.shippingAddressShort) return uni.$u.toast('请输入详细地址如门牌号等')
                if(!this.params.documentType) return uni.$u.toast('请选择文档单据')
            }
            this.step = this.step + 1
        },
        // 上一步
        prevHandle() {
            this.step = this.step -1
        },
        deleteHandle(index, prop) {
            this[prop].splice(index, 1)
        },
        // 选择客户
        SelectCus() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectCustomer',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.params.customerId = data.data.id
                        that.params.customerName = data.data.customerName
                        that.params.orderSource = data.data.opportunitySource
                        that.params.businessManager = data.data.businessManagerName
                        that.params.businessManagerId = data.data.businessManagerId
                        // 收货人姓名
                        that.params.recipient = data.data.customerName
                        that.params.recipientPhone = data.data.phoneNumber
                        that.params.shippingAddressShort = data.data.detailedAddress

                        that.params.localProvinceName = data.data.localProvinceName
                        that.params.localCityName = data.data.localCityName
                        that.params.localCountyName = data.data.localCountyName

                        that.params.areaCodeAll = data.data.localProvince + ',' +  data.data.localCity + ',' +  data.data.localCounty
                    },
                },
                success: function (res) {
					let obj = {
                        id: that.params.customerId,
                        customerName: that.params.customerName
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        // 选择业务员
        selectHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectSalesman',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.params.businessManagerId = data.data.userId
                        that.params.businessManager = data.data.userName
                        that.params.avatar = data.data.avatar
                    },
                },
                success: function (res) {
                    let obj = { 
                        userId: that.params.businessManagerId,
                        userName: that.params.businessManager,
                        avatar: that.params.avatar
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        // 打开日历
        openCalendar() {
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
            console.log(e)
        },
        showPhoto() {
            let that = this
            uni.chooseImage({
                count: 9,
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    // console.log(res);
                    // console.log(res.tempFilePaths);
                    upImage(res.tempFilePaths).then(res => {
                        console.log(res)
                        that.params.paymentUrl = [...that.params.paymentUrl, ...res]
                    })
                }
            });
        },
        previewImg(index) {
            uni.previewImage({
                current: index,
                urls: this.params.paymentUrl
            })
        },
        delImg(index) {
            this.params.paymentUrl.splice(index, 1)
        },
        changeRadio(evt) {
            console.log(evt)
            this.params.documentType = evt.detail.value
        },
        // 关闭日历
        closeCalendar() { },
        submit() {

            if(!this.params.customerId) return uni.$u.toast('请选择客户')
            if(!this.params.commodityList.length) return uni.$u.toast('请选择商品')
            if(!this.params.orderTotalAmount) return uni.$u.toast('请输入订单金额')
            if(!this.params.paymentMethod) return uni.$u.toast('请选择付款方式')
            if(!this.params.businessManagerId) return uni.$u.toast('请选择归属人员')

            let obj = JSON.parse(JSON.stringify(this.params))
            obj.commodityList = obj.commodityList.map(item => {
                delete item.id
                return item
            })

            if(this.editType) {
                this.$http.put('/app/order', obj).then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        uni.showToast({ title: '成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            } else {
                this.$http.post('/app/order/draft', obj).then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        uni.showToast({ title: '成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            }
        },
        draftHandle() {
            const obj = JSON.parse(JSON.stringify(this.params))
            obj.commodityList = [...this.goodsList, ...this.giftList]
            obj.paymentUrl = this.params.paymentUrl.join(',')
			if(obj.localProvinceName!=null && obj.localProvinceName!=""){
				obj.shippingAddress = obj.localProvinceName + obj.localCityName + obj.localCountyName + ' ' + obj.shippingAddressShort
				}
			//obj.shippingAddress = obj.localProvinceName + obj.localCityName + obj.localCountyName + ' ' + obj.shippingAddressShort
            if (!this.editType) {
                obj.commodityList.forEach(item => {
                    delete item.id
                })
            }
            if(!this.editType) {
                this.$http.post('/app/order/draft', obj).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        uni.showToast({ title: '保存成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            } else {
                this.$http.put('/app/order', obj).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        uni.showToast({ title: '保存成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            }
        },
        // 提交审核
        submitHandle() {
            const obj = JSON.parse(JSON.stringify(this.params))
            obj.commodityList = [...this.goodsList, ...this.giftList]
            obj.paymentUrl = this.params.paymentUrl.join(',')
			if(obj.localProvinceName!=null && obj.localProvinceName!=""){
				obj.shippingAddress = obj.localProvinceName + obj.localCityName + obj.localCountyName + ' ' + obj.shippingAddressShort
			}
            if (!this.editType) {
                obj.commodityList.forEach(item => {
                    delete item.id
                })
            }
            console.log(obj)
            if(!this.editType) {
                // 新增
                this.$http.post('/app/order', obj).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        uni.showToast({ title: '提交成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            } else {
                this.$http.put('/app/order', obj).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        uni.showToast({ title: '提交成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            }
        },
        // 去选择城市
		selectCityHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/other/selectCity',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        console.log(data)
                        let obj = data.data
                        that.params.areaCodeAll = obj.localProvince.code + ',' +  obj.localCity.code + ',' + obj.localCounty.code
                        // that.params.localProvince = data.data.localProvince.code
                        that.params.localProvinceName = obj.localProvince.name
                        // that.params.localCity = data.data.localCity.code
                        that.params.localCityName = obj.localCity.name
                        // that.params.localCounty = data.data.localCounty.code
                        that.params.localCountyName = obj.localCounty.name

                    },
                },
                success: function (res) {
                    // console.log('success:' + JSON.stringify(res))
                    // let obj = { id: 5, name: "列表B2" }
                    // res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
		upPrice(index, priceType) {
			console.log(priceType)
			this.setPriceIndex = index
			this.selectPrice = priceType
			this.showActionPrice = true
		},
		submitPrice(e) {
			console.log(e)
            // 设置库存数据
            this.$set(this.goodsList[this.setPriceIndex], 'factoryPrice', e.value)
            this.$set(this.goodsList[this.setPriceIndex], 'factoryPriceName', e.name)
            // 设置销售单价
            this.$set(this.goodsList[this.setPriceIndex], 'unitPrice', e.value)
			
			this.$set(this.goodsList[this.setPriceIndex], 'unitSinglePrice', e.value)
            // 每行总数
            this.setSubtotal(this.setPriceIndex)
		},
        backHandle() {
            uni.navigateBack()
        },
        get_bus_document_type() {
            this.$http.get('/app/system/dict/data/type/bus_document_type', {}).then(res => {
				if (res.code == 200) {
					this.bus_document_type = res.data.map(item => {
						return {
							name: item.dictLabel,
							...item
						}
					})
					this.params.documentType = this.bus_document_type[0].dictValue
				} 
			})
        },
        // 获取物流列表
        getLogistics() {
            this.$http.get('/app/neworder/my/logisticsList', {  }).then(res => {
                console.log(res)
				if (res.code == 200) {
                    this.logisticsList = res.rows
				} 
			})
        },
        bindPickerlogisticsChange(e) {
            console.log(e)
            let index = e.detail.value
            let row = this.logisticsList[index]
            this.params.logisticsId = row.id
            this.params.logistics = row.logisticsCompany
            console.log(row)
        }
    }
}
</script>

<style lang="scss" scoped>
.unibarS {
    /deep/.uni-navbar__header {
        padding: 0 32rpx;
    }

    /deep/.uni-navbar__content {
        border-bottom: none !important;
        box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
    }

    .sub-btn {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(77, 172, 177, 1);
    }
}
.content_box {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 44px)
	// height: 100vh;
}
.customer-content {
	flex: 1;
	overflow-y: auto;
    margin: 20rpx 0;
}
.flex_content {
    display: flex;
    flex-direction: column;
    .goods_item {
        border-radius: 12rpx;
        background: rgba(247, 248, 250, 1);
        padding: 28rpx;
        margin-bottom: 28rpx;
        >view {
            margin-bottom: 26rpx;
        }
        // 最后一个
        >view:last-child {
            margin-bottom: 0;
        }
    }
    .goods_box {
        padding-top: 28rpx;
        flex: 1;
        overflow-y: auto;
        .goods_name {
            display: flex;
            align-items: center;
            .goods_name_text {
                flex: 1;
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-right: 10rpx;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .goods_row {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            .goods_label {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
            }
            .goods_value {
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }
            .price_value {
                width: 316rpx; height: 72rpx;
                line-height: 72rpx; display: flex; justify-content: space-between;
                align-items: center; padding: 0 20rpx;
                border-radius: 8rpx; background: #FFFFFF;
            }
            .circle_value {
                display: flex; align-items: center;
            }
        }
        // 收益
        .income_box {
            display: flex; align-items: center;
            font-size: 28rpx;
            >view:nth-child(1) { margin-right: 18rpx; }
            >view:nth-child(2) { flex: 1; }
            >view:nth-child(3) { 
                font-size: 24rpx;
                font-weight: 500;
                color: rgba(0, 146, 63, 1);
                border: 1px solid #00923F;
                border-radius: 12rpx;
                padding: 14rpx 12rpx;
             }
        }
    }
    .no_goods_box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }

    .rate-box,
    .item-switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

.item-title {
    padding: 48rpx 32rpx 20rpx 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}

.item-temp-box {
    text-align: right;
    width: 100%;
    font-size: 30rpx;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .tagging-item {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-left: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.first-box {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;
}

.task-item {
    margin-top: 20rpx;
}

.footer-box {
    width: 100%;
    box-sizing: border-box;
	padding: 16rpx 32rpx;
    display: flex;
    > view {
        flex: 1;
        text-align: center;
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 500;
        border-radius: 10rpx;
    }
    .footer-sub-btn {
        background-color: #4DACB1;
        color: rgba(255, 255, 255, 1);
    }
    .footer-back-btn {
        border: 1px solid rgba(103, 117, 133, 0.5);
        color: rgba(103, 117, 133, 1);
    }
}

.img_list {
	margin-top: 16rpx;
    display: flex;
    flex-wrap: wrap;
    .img_box {
        width: 164rpx;
        height: 164rpx;
        position: relative;
        .del_icon {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    > view {
        margin-right: 20rpx;
    }
}
.upload_box {
	width: 164rpx;
	height: 164rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	background: #F7F8FA;
	> view {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(12, 16, 25, 1);
		margin-top: 8rpx;
	}
}

.add_title_box {
    display: flex;
    justify-content: space-between;
    .left_box {
        display: flex;
        align-items: center;
        > view:nth-child(1) {
            width: 8rpx;
            height: 32rpx;
            border-radius: 40rpx;
            background: rgba(77, 172, 177, 1);
            margin-right: 8rpx;
        }
        > view:nth-child(2) {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }
    .add_btn {
        width: 148rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 8rpx;
        background: #4DACB1;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>